<template>
  <div id="advert" class="main-box">
    <TableSearch :model="params">
      <template>
        <el-form-item :label="$t('表单名称')" prop="name">
          <el-input v-model="params.name" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search()">
            {{ $t('搜索') }}
          </el-button>
          <el-button @click="reset()">{{ $t('重置') }}</el-button>
        </el-form-item>
      </template>
      <template #btn>
        <el-button type="primary" icon="el-icon-plus" @click="goAdd">
          {{ $t('添加') }}
        </el-button>
      </template>
    </TableSearch>
    <BaseTable :request="request" :params.sync="params" ref="baseTable">
      <el-table-column label="ID" prop="id" />
      <el-table-column :label="$t('表单标识')" prop="code" show-overflow-tooltip />
      <el-table-column :label="$t('表单名称')" prop="name" show-overflow-tooltip />
      <el-table-column :label="$t('表单类型')" prop="type">
        <template slot-scope="scope">
          <div v-if="scope.row.type == 2">{{ $t('问卷') }}</div>
          <div v-if="scope.row.type == 1">{{ $t('表单') }}</div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('是否发布')" prop="status">
        <template slot-scope="scope">
          <div v-if="scope.row.status == 2">
            <span class="success_status" />
            {{ $t('已发布') }}
          </div>
          <div v-if="scope.row.status == 1">
            <span class="error_status" />
            {{ $t('未发布') }}
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('操作')" width="150px" fixed="right" align="right">
        <template slot-scope="scope">
          <EditBtn v-if="scope.row.status == 1" @click="editor(scope.row)" />
          <DelBtn @success="del(scope.row)" :confirm-content="$t('您确定要删除该表单')" v-if="scope.row.status == 1" />
          <CheckBtn v-if="scope.row.status == 2" @click="detail(scope.row)" />
          <BaseDropdown @command="handlerCommand($event, scope.row)">
            <el-dropdown-item command="design">
              {{ $t('设计') }}
            </el-dropdown-item>
            <el-dropdown-item command="deploy">
              {{ $t('发布') }}
            </el-dropdown-item>
            <el-dropdown-item command="undeploy">
              {{ $t('卸载') }}
            </el-dropdown-item>
            <el-dropdown-item command="share">
              {{ $t('分享') }}
            </el-dropdown-item>
          </BaseDropdown>
        </template>
      </el-table-column>
    </BaseTable>

    <!-- 分享问卷 -->
    <BaseDialog :dialog-show.sync="shareShow" :title="$t('分享问卷')" width="40">
      <share :code="code" @success="shareSuccess" />
    </BaseDialog>

    <AddForm :dialog-show.sync="dialogShow" :data="formData" @success="handleSuccess"></AddForm>
  </div>
</template>
<script>
import formApi from '@/api/form.js'
import design from './components/design.vue'
import share from './components/share.vue'
import AddForm from './components/AddForm.vue'

export default {
  components: {
    AddForm,
    share
  },
  data() {
    return {
      request: formApi.list,
      code: '',
      title: this.$t('添加表单'),
      shareShow: false,
      dialogShow: false,
      designShow: false,
      params: {
        name: ''
      },
      formData: {},
      design_content: {},

      id: 0,
      loading: true,
      orderData: []
    }
  },

  methods: {
    // 更多操作
    handlerCommand(key, row) {
      switch (key) {
        case 'design':
          this.design(row)
          break
        case 'deploy':
          this.deploy(row)
          break
        case 'undeploy':
          this.undeploy(row)
          break
        case 'share':
          this.share(row)
          break
      }
    },
    search(type) {
      // this.getList()
      this.$refs.baseTable.getList()
    },
    reset() {
      this.params.name = ''
      this.$refs.baseTable.resetTable()
    },
    goAdd() {
      this.formData = {
        type: 1
      }
      this.title = this.$t('添加表单')
      this.dialogShow = true
    },
    editor(row) {
      this.formData = row
      this.title = this.$t('编辑表单')
      this.dialogShow = true
    },
    // 列表
    getList(type) {
      this.$refs.baseTable.getList(type)
    },
    design(row) {
      this.id = row.id
      // 设计页面
      this.$router.push({
        path: '/form/design',
        query: {
          id: row.id
        }
      })
    },
    async deploy(row) {
      const res = await formApi.deploy({ id: row.id })
      if (res.code == 0) {
        this.getList()
        this.$message.success(res.msg)
      }
    },
    undeploy(row) {
      this.$confirm(this.$t('卸载表单提示'), this.$t('提示'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      })
        .then(async () => {
          const res = await formApi.undeploy({ id: row.id })
          if (res.code == 0) {
            this.getList()
            this.$message.success(res.msg)
          }
        })
        .catch(() => { })
    },
    del(row) {
      this.$confirm(this.$t('您确定要删除该表单'), this.$t('提示'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      })
        .then(async () => {
          const res = await formApi.del({ id: row.id })
          if (res.code == 0) {
            this.getList('search')
            this.$message.success(res.msg)
          }
        })
        .catch(() => { })
    },
    handleSuccess() {
      this.getList()
      this.dialogShow = false
    },
    designSuccess() {
      this.designShow = false
      this.getList()
    },
    shareSuccess() {
      this.shareShow = false
    },
    share(row) {
      this.code = row.code
      this.shareShow = true
    },
    detail(row) {
      this.id = row.id
      // 数据详情页面
      this.$router.push({
        path: '/form/detail',
        query: {
          id: row.id
        }
      })
    }
  }
}
</script>
<style lang="scss">
.design {
  background: #6f6f95;
  color: #fff;
}

.deploy {
  background: #409eff;
  color: #fff;
}

.attachment .el-dialog {
  .el-dialog__body {
    height: 600px;
  }

  .el-table {
    .attachmentImg {
      width: 60px;
      height: 60px;
    }
  }

  .el-button--primary {
    background-color: var(--huocms-com-color-primary);
    border-color: var(--huocms-com-color-primary);
    border-radius: 20px;
  }
}

#advert {

  // .advert{
  //   .el-select{
  //       width: calc(100% - 100px);
  //   }
  //   .el-date-editor.el-input{
  //     width: calc(100% - 100px);
  //   }
  // }
  .addForm .el-form-item {
    width: 100%;
  }

  .addForm .el-form-item__content {
    width: calc(100% - 100px);
  }

  .el-date-editor.el-input {
    width: 100%;
  }
}
</style>
<style scoped lang="scss">
.main-box {
  padding-top: 0;
}

.el-table {
  margin-bottom: 20px;
}

.search {
  min-width: 1350px;
  background-color: #fff;
  padding: 35px 30px 20px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.avatar {
  max-width: 200px;
}

.attachment_imgBox {
  .videoName {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
  }
}

.error_status {
  background: #f56c6c;
  border-radius: 50px;
  display: inline-block;
  width: 5px;
  height: 5px;
  position: relative;
  top: -2px;
  left: -2px;
}

.success_status {
  background: #0bb278;
  border-radius: 50px;
  display: inline-block;
  width: 5px;
  height: 5px;
  position: relative;
  top: -2px;
  left: -2px;
}
</style>
